<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>拖拽容器的边缘元素调整容器元素大小</title>
    </head>
    <body>
        <div class="container">
            <div class="drag-bar">
                <!-- 图标 -->
                <div class="w-out"></div>
                <div class="w-narrow"></div>
                <div class="w-ext"></div>
            </div>
            <div class="content">
                <div>
                    <h1>PROTECT</h1>
                    <h1>THE BEST IKUN</h1>
                </div>
            </div>
            <!-- box四条边可拖动区域 -->
            <div class="edge edge-top"></div>
            <div class="edge edge-bottom"></div>
            <div class="edge edge-right"></div>
            <div class="edge edge-left"></div>
            <!-- box四角可拖动区域 -->
            <div class="corner corner-lt"></div>
            <div class="corner corner-lb"></div>
            <div class="corner corner-rt"></div>
            <div class="corner corner-rb"></div>
        </div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>
